<template>
    <view class="busin-container">
        <view class="mt-3 flex items-center">
            <u-radio-group v-model="form.way" placement="row">
                <template v-for="(item, index) in items" :key="index">
                    <u-radio shape="circle" :label="item.name" :name="item.value"></u-radio>
                    &emsp;
                </template>
            </u-radio-group>
        </view>
        <template v-if="form.way !== '1'">
            <l-input label="单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价" class="mt-3" v-model="form.unit"
                @input="unitInput" type="digit" maxlength="10" placeholder="请输入单价（元/m²）" />
            <l-input label="面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;积" class="mt-3" v-model="form.area"
                @input="areaInput" type="digit" maxlength="10" placeholder="请输入房屋面积（m²）" />
        </template>

        <l-input label="房屋总价" class="mt-3" @input='totalPriceInput' v-model="form.totalPrice"
            :disabled="form.way !== '1'" type="digit" maxlength="10" placeholder="请输入房屋总价（万元）" />

        <l-select label="贷款成数" class="mt-3" @update:modelValue="bindPickerChange" :modelValue="index" keyName="name"
            :list="array">
        </l-select>
        <view class="flex items-center mt-3">
            <view class="mr-2">
                <p>贷款金额</p>
            </view>
            <view>
                {{ form.amount || 0 }} 万元
            </view>
        </view>

        <l-select label="贷款年限" class="mt-3" @update:modelValue="yearBindPickerChange" :modelValue="yearIndex"
            :list="yearArray" keyName="name">
        </l-select>

        <view class="mt-3 flex items-center">
            <u-radio-group v-model="form.rate" placement="row">
                <template v-for="(item, index) in rateArr" :key="index">
                    <u-radio shape="circle" :label="item.name" :name="item.value"></u-radio>
                    &emsp;
                </template>
            </u-radio-group>
        </view>



        <l-select v-if="form.rate === '1'" label="商贷利率" class="mt-3" @update:modelValue="rateBindPickerChange"
            :modelValue="rateIndex" :list="rateList">
        </l-select>

        <view class="flex items-center" v-else>
            <view class="text-nowrap mr-3">
                商贷利率
            </view>
            <view class="border border-gray-300 rounded p-1 flex-1">
                <view class="right-form-rate">
                    <view class="right-form-rate-left">
                        LPR
                    </view>
                    <l-input class="uni-input" @input='LprInput' v-model="form.lpr" type="digit" maxlength="10">
                        <template #suffix>
                            %
                        </template>
                    </l-input>

                </view>
                <view class="right-form-rate">
                    <view class="right-form-rate-left">
                        基点
                    </view>
                    <l-input class="uni-input" @input='pointInput' v-model="form.point" type="digit" maxlength="10">
                        <template #suffix>
                            ‱
                        </template>
                    </l-input>
                </view>
            </view>
        </view>
        <view class="dengyu" v-if="form.rate === '1'">
            = {{ form.rateNum }} %
        </view>
        <view class="dengyu" v-else>
            = {{ form.rateLpr }} %
        </view>
    </view>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            items: [{
                value: '1',
                name: '按房屋总价计算'
            },
            {
                value: '2',
                name: '按单价与面积计算'
            }
            ],
            current: 0,
            array: [{
                value: 0.2,
                name: '二成'
            }, {
                value: 0.3,
                name: '三成'
            }, {
                value: 0.4,
                name: '四成'
            }, {
                value: 0.5,
                name: '五成'
            },
            {
                value: 0.6,
                name: '六成'
            }, {
                value: 0.7,
                name: '七成'
            }, {
                value: 0.8,
                name: '八成'
            }, {
                value: 0.9,
                name: '九成'
            }
            ],
            rateList: [{
                value: 1,
                label: "基准利率(4.9%)"
            },
            {
                value: 0.7,
                label: "基准利率7折"
            },
            {
                value: 0.85,
                label: "基准利率85折"
            },
            {
                value: 0.88,
                label: "基准利率88折"
            },
            {
                value: 0.9,
                label: "基准利率9折"
            },
            {
                value: 0.95,
                label: "基准利率95折"
            },
            {
                value: 1.05,
                label: "基准利率1.05倍"
            },
            {
                value: 1.1,
                label: "基准利率1.1倍"
            },
            {
                value: 1.2,
                label: "基准利率1.2倍"
            },
            {
                value: 1.3,
                label: "基准利率1.3倍"
            }
            ],
            yearArray: [],
            yearIndex: 19,
            index: 5,
            rateIndex: 0,
            amount: 33.4,
            form: {
                // 计算方式
                way: '1',
                rate: '1',
                // 房屋总价
                totalPrice: null,
                // 贷款层数
                percentage: 0.7,
                // 贷款金额
                amount: null,
                // 年限 * 12
                years: 240,
                // 显示利率
                rateNum: 0.49,
                // 基准利率
                baseRate: 0.049,
                // lpr显示利率
                rateLpr: 4.65,
                // lpr 利率
                lpr: 4.65,
                // 基点
                point: null,
                // 单价
                unit: null,
                // 面积
                area: null

            },
            rateArr: [{
                value: '1',
                name: '基准利率'
            },
            {
                value: '2',
                name: 'LRP基础利率'
            }
            ],
            current: 0
        }
    },
    watch: {
        form: {
            handler: function (newvalue) {
                // console.log(newvalue);
            },
            deep: true //deep置为true表示：对象中任一属性值发生变化，都会触发handler中的方法
        }
    },
    created() {
        for (let i = 1; i <= 30; i++) {
            this.yearArray.push({
                value: i * 12,
                name: `${i}年`
            })
        }
    },
    onLoad() {

    },
    methods: {
        submit() {
            if (this.ruls()) {
                const obj = {
                    totalPrice: this.form.totalPrice,
                    loanMoney: this.form.amount,
                    months: this.form.years,
                    rate: this.form.baseRate,
                    payMoney: ((1 - this.form.percentage) * this.form.totalPrice).toFixed(2),
                    type: this.form.way
                }
                this.$emit('submit', obj)
            }
        },
        ruls() {
            if (this.form.way === '2') {
                if (!this.form.unit) {
                    uni.showToast({
                        title: '请输入单价',
                        icon: 'none'
                    })
                    return false
                }
                if (!this.form.area) {
                    uni.showToast({
                        title: '请输入面积',
                        icon: 'none'
                    })
                    return false
                }
                return true
            }
            if (!this.form.totalPrice) {
                uni.showToast({
                    title: '请输入总价',
                    icon: 'none'
                })
                return false
            }
            if (!this.form.amount) {
                uni.showToast({
                    title: '请输入贷款金额',
                    icon: 'none'
                })
                return false
            }

            return true
        },
        // 房屋总价输入框事件
        totalPriceInput(val) {
            this.form.amount = (Number(val) * this.form.percentage).toFixed(2)
        },
        // lpr
        LprInput(val) {
            this.pointInput(this.form.point)
        },
        //  基点
        pointInput(val) {
            if (this.form.lpr) {
                this.form.rateLpr = (this.form.lpr * 1 + Number(val) / 100).toFixed(2)
            } else {
                this.form.rateLpr = (Number(val) / 100).toFixed(2)
            }
        },
        unitInput(val) {
            if (this.form.area) {
                this.form.totalPrice = (this.form.area * Number(val)) / 10000
                this.form.amount = (this.form.totalPrice * this.form.percentage).toFixed(2)
            }
        },
        areaInput(val) {
            if (this.form.unit) {
                this.form.totalPrice = (this.form.unit * Number(val)) / 10000
                this.form.amount = (this.form.totalPrice * this.form.percentage).toFixed(2)
            }
        },
        // 贷款层数切换事件
        bindPickerChange(value) {
            this.index = value;
            this.form.percentage = value
            this.form.amount = (value * this.form.totalPrice).toFixed(2)
        },
        // 贷款年限切换事件
        yearBindPickerChange(value) {
            this.yearIndex = value
            this.form.years = value
        },
        // 基准利率
        rateBindPickerChange(value) {
            this.form.baseRate = 0.049 * value
            this.form.rateNum = (0.049 * value * 100).toFixed(2)
            this.rateIndex = value;
        }

    }
}
</script>
